<template>
  <my-dialog :title="title"
             :width="width"
             :height="height"
             :visible.sync="currVisible"
             :footer="footer"
             :maximizable="maximizable"
             :draggable="draggable"
             :theme="theme"
             target="body"
             modal
             v-bind="$attrs">
    <component :is="comp"
               @cancel="onCancel"
               v-bind="props"
               @on-ok="onOK" />
  </my-dialog>
</template>

<script>
export default {
  name: 'simple-dialog',
  cnName: 'simple-dialog',
  props: {
    title: String,
    comp: {
      type: Object,
      default: null
    },
    width: {
      type: String,
      default: '60%'
    },
    height: {
      type: String,
      default: '70%'
    },
    visible: {
      type: Boolean
    },
    props: Object,
    theme: {
      type: String,
      default: 'light'
    },
    draggable: {
      type: Boolean,
      default: true
    },
    maximizable: {
      type: Boolean,
      default: true
    },
    footer: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currVisible: this.visible
    }
  },
  methods: {
    onOK(data, refresh) {
      this.$emit('on-ok', data, refresh)
    },
    onCancel() {
      this.currVisible = false
      this.$emit('cancel')
    }
  },
  watch: {
    currVisible(val) {
      this.$emit('update:visible', val)
    },
    visible(val) {
      this.currVisible = val
    }
  },
  computed: {},
  mounted() {

  }
}
</script>

<style lang="scss" scoped>
  .simple-dialog {

  }
</style>
